import axios from 'axios'
export default {
  namespaced: true,
  state () {
    return {
      // 图书表数据
      bookList: [],
      // 分类统计数据
      categoryStatistics: []
    }
  },
  mutations: {
    // 更新vuex数据
    updateList (state, newList) {
      state.bookList = newList
    },
    // 新增图书
    addBookList (state, newList) {
      state.bookList = newList
    },
    // 删除图书
    deleteBookList (state, id) {
      state.bookList = state.bookList.filter(book => book.id !== id)
    },
    // 更新分类统计数据
    updateCategoryStatistics (state, newStatistics) {
      state.categoryStatistics = newStatistics
    }
  },
  actions: {
    async getList (context) {
      const res = await axios.get('http://localhost:3000/books')
      console.log('图书列表获取操作提示：' + res.statusText)
      context.commit('updateList', res.data)
    },
    async postBook (context, addBook) {
      const res = await axios.post('http://localhost:3000/books', addBook)
      console.log(res)
      context.commit('updateList', res.data)
      await context.dispatch('getCategoryStatistics')
    },
    async deleteBook (context, id) {
      console.log(id)
      const res = await axios.delete(`http://localhost:3000/books/${id}`)
      console.log('图书删除操作提示：' + res)
      context.commit('deleteBookList', id)
      await context.dispatch('getCategoryStatistics')
    },
    async getCategoryStatistics (context) {
      try {
        // 获取图书列表
        await context.dispatch('getList')
        const bookList = context.state.bookList
        // 创建一个 Map 存储分类和数量
        const categoryMap = new Map()
        // 遍历图书列表，统计每个分类的图书数量
        bookList.forEach(book => {
          if (categoryMap.has(book.category)) {
            categoryMap.set(book.category, categoryMap.get(book.category) + 1)
          } else {
            categoryMap.set(book.category, 1)
          }
        })
        // 将 Map 中的数据转换为数组，并添加 name 和 value 属性
        const categoryStatistics = Array.from(categoryMap, ([name, value]) => ({ name, value }))
        // 对数组进行排序，按照数量降序排列
        categoryStatistics.sort((a, b) => b.value - a.value)
        // 为前三个元素添加 itemStyle 属性
        for (let i = 0; i < categoryStatistics.length; i++) {
          if (i === 0) {
            categoryStatistics[i].itemStyle = { color: '#53a8ff' }
          } else if (i === 1) {
            categoryStatistics[i].itemStyle = { color: '#66b1ff' }
          } else if (i === 2) {
            categoryStatistics[i].itemStyle = { color: '#79bbff' }
          }
        }
        console.log(categoryStatistics)
        // 更新 Vuex 状态
        context.commit('updateCategoryStatistics', categoryStatistics)
      } catch (error) {
        console.error('获取分类统计数据出错:', error)
      }
    }
  },
  getters: {
  }
}
